<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" class="chart-wrapper" style="margin-bottom:20px;padding-left:0">
        <div>
          <el-col :xs="6" :sm="6" :lg="6" class="mtright" style="padding-left:0">
            <el-input v-model="listQuery.name" placeholder="请输入搜索内容" class="btnScr" :xs="24" :sm="16" :lg="16" />
            <el-button type="primary" icon="el-icon-search" class="btnScrright" :xs="24" :sm="8" :lg="8" @click="init">搜索</el-button>
          </el-col>
          <el-button
            class="filter-item"
            type="primary"
            style="margin-right:auto;"
            @click="addReportClick"
          >新增</el-button>
        </div>
      </el-col>

      <myModal :obj="obj" :disabled="disabled" @close="close" @save="save">
        <div class="mpdalBody">
          <el-form ref="form" :model="postForm" label-width="65px" class="formDiv">
            <el-col :xs="12" :sm="12" :lg="12" class="mtright">
              <el-form-item label="维修类目:" :span="24">
                <el-input v-model="postForm.name" placeholder="请输入" style="width:100%" />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="mtright">
              <el-form-item label="英文名字:" :span="24">
                <el-input v-model="postForm.englishName" placeholder="请输入" style="width:100%" />
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </myModal>
      <!---->

      <el-table
        :data="tableData"
        style="width: 100%"
        class="card-table"
        :border="false"
        stripe
        :default-sort="{prop: 'five'}"
      >
        <el-table-column
          show-overflow-tooltip
          prop="ID"
          label="ID"
          min-width="50"
          type="index"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          label="维修类目"
          min-width="50%"
          prop="name"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="englishName"
          label="英文名字"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="financeType"
          label="类别"
          min-width="50%"
          :formatter="lbFor"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip

          label="操作"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              class="linkBtn"
              @click="handleClick(scope.row, 1)"
            >编辑</el-button>
            <el-button
              type="text"
              size="small"
              class="linkBtn"
              @click="delClick(scope.row, 1)"
            >删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!-- <el-pagination
            background
            :current-page="listQuery.page"
            :page-sizes="[10, 20, 50,100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          /> -->
    </el-row>

    <!---->
    <myModal :obj="deleteobj" @close="close" @save="deleteHouse">
      <div class="mpdalBody">
        <span style="display:block;text-align:center">确定要删除该类目吗？</span>
      </div>
    </myModal>
    <!---->
  </div>
</template>

<script>
import { multipleAdd, getmultipleList, delFour } from '@/api/houseView'
import myModal from '@/components/Modal'
import { currencyOptions } from '@/utils/consts'
import { currencyFormat } from '@/utils/common'
export default {
  components: {
    myModal
  },
  data() {
    return {
      disabled: true,
      total: 3,
      id: '',
      value: '',
      obj: {
        show: false,
        title: '新增维修类目',
        width: '647px'
      },
      deleteobj: {
        show: false,
        title: '删除维修',
        width: '447px'
      },
      postForm: {
        type: 1
      },
      currencyOptions,
      currencyFormat,
      tableData: [],
      listQuery: {
        page: 1,
        limit: 10,
        type: 1
      }
    }
  },
  watch: {
    postForm: {
      handler(val) {
        if (val.name && val.englishName) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      deep: true
    }
  },

  mounted() {
    this.init()
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.page = val
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.page = 1
      this.listQuery.limit = val
    },
    handleClick(row) {
      this.postForm = JSON.parse(JSON.stringify(row))
      this.value = row.financeType
      this.obj.title = '编辑维修类目'
      this.obj.show = true
    },
    delClick(row) {
      this.id = row.id
      this.deleteobj.show = true
    },
    lbFor(row) {
      return '支出'
      // return row.financeType == 0 ? '支出' : '收入'
    },
    deleteHouse() {
      delFour(this.id).then(response => {
        this.$notify.success({ message: '删除成功' })
        this.init()
        this.deleteobj.show = false
      })
    },
    init() {
      getmultipleList(this.listQuery).then(response => {
        this.tableData = response.data
        this.total = response.data.total
      })
    },
    addReportClick() {
      this.postForm = {}
      this.postForm.type = 1
      this.obj.title = '新增维修类目'
      this.obj.show = true
    },
    close(val) {
      this.obj.show = val
      this.deleteobj.show = val
      this.init()
    },
    getRemoteStateList(data) {
      console.log(data)
    },
    save() {
      const that = this
      multipleAdd(this.postForm).then(response => {
        this.$notify.success({ message: '保存成功' })
        if (response.code === 200) {
          this.init()
          this.close()
          this.postForm = {}
          this.postForm.type = 1
          this.value = ''
          that.close()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-wrapper{text-align: right;}
.mpdalBody{overflow: hidden;}
::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}
::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}
::v-deep th {
  background: #f7f7f7;
  font-weight: normal;
  color: #101010;
}
.mtright{display: flex;}
::v-deep .btnScr input{border-radius: 4px 0 0 4px;}
::v-deep .btnScrright{border-radius: 0px 4px 4px 0px;}
</style>

